<template>
  <div>
    <yu-select
      select
      :options="data.cityData"
      v-model:value="data.loca"
      lab="cityZh"
      val="id"
      @change="cityChange"
    />
    <div>
      <span>当天天气</span>
      <div>
        <span>当前日期：</span>
        <span>{{ data.weatherV6.date }}</span>
        {{ data.weatherV6.week }}
      </div>
      <div><span>更新时间：</span>{{ data.weatherV6.update_time }}</div>
      <div><span>当前城市：</span>{{ data.weatherV6.city }}</div>
      <div>
        <span>当前天气：</span>{{ data.weatherV6.wea }}
        <span>{{ data.weatherV6.tem1 }}~{{ data.weatherV6.tem2 }}</span>
      </div>
      <div>
        <el-image
          :src="loadImg(data.weatherV6.wea_img)"
          fit="fill"
          style="width: 60px; height: 60px"
          alt="天气"
        >
          <template #error>
            <div class="image-slot">
              <el-image
                style="width: 60px; height: 60px"
                :src="require('@/assets/weather/lei.png')"
                alt="天气"
              ></el-image>
            </div>
          </template>
        </el-image>
      </div>
      <div><span>当前温度：</span>{{ data.weatherV6.tem }}</div>
      <div>
        {{ data.weatherV6.win }}
        <span>{{ data.weatherV6.win_speed }}</span>
        <span>{{ data.weatherV6.win_meter }}</span>
      </div>
      <div><span>湿度：</span>{{ data.weatherV6.humidity }}</div>
      <div><span>能见度：</span>{{ data.weatherV6.visibility }}</div>
      <div><span>气压：</span>{{ data.weatherV6.pressure }}</div>
      <div>
        <span>空气质量：</span>{{ data.weatherV6.air }}
        <span>等级：{{ data.weatherV6.air_level }}</span>
        <span> pm2.5：{{ data.weatherV6.air_pm25 }}</span>
      </div>
      <div><span>小提示：</span>{{ data.weatherV6.air_tips }}</div>

      <!-- <div><span>预警描述：</span>{{ data.weatherV6.alarm }}</div> -->
    </div>
    <div class="future">
      <template v-for="item in data.weatherV1.data">
        <div class="future_item" @click="changeDay(item)">
          <div>{{ item.date }}</div>
          <div>{{ item.week }}</div>

          <div>
            <el-image
              :src="loadImg(item.wea_img)"
              fit="fill"
              style="width: 60px; height: 60px"
              alt="天气"
            >
              <template #error>
                <div class="image-slot">
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="require('@/assets/weather/lei.png')"
                    alt="天气"
                  ></el-image>
                </div>
              </template>
            </el-image>
          </div>
          <div>{{ item.wea }}</div>
          <div>
            <span>{{ item.tem1 }}~{{ item.tem2 }}</span>
          </div>
        </div>
      </template>
    </div>
    <div class="future_tip">
      <div class="hours">
        <template v-for="item in data.detail.hours">
          <div class="hours_item">
            <div>{{ item.wea }}</div>
            <div>
              <el-image
                :src="loadImg(item.wea_img)"
                fit="fill"
                style="width: 40px; height: 40px"
                alt="天气"
              >
                <template #error>
                  <div class="image-slot">
                    <el-image
                      style="width: 40px; height: 40px"
                      :src="require('@/assets/weather/lei.png')"
                      alt="天气"
                    ></el-image>
                  </div>
                </template>
              </el-image>
            </div>
            <div>{{ item.tem }}</div>
            <div>{{ item.win }}</div>
            <div>{{ item.win_speed }}</div>
            <div>{{ item.hours }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
let { proxy } = getCurrentInstance();
const dayImg = ref('');
const data = reactive({
  cityData: [],
  weatherV1: {},
  weatherV6: { wea_img: 'qing' },
  loca: '',
  detail: {},
  dayImg: '',
});
//默认北京
data.loca = proxy.$storage.getItem('loca') || '101010100';
onMounted(() => {
  getSysCity();
  getWeather();
});
const getSysCity = async () => {
  data.cityData = await proxy.$api.system.querySysCity();
};
const getWeather = async () => {
  //七天天气
  let param = { city: data.loca, version: 'v1' };
  data.weatherV1 = await proxy.$api.system.queryWeather(param);
  //当天天气
  param = { city: data.loca, version: 'v6' };
  data.weatherV6 = await proxy.$api.system.queryWeather(param);
  dayImg.value = data.weatherV6.wea_img;
};
const cityChange = value => {
  proxy.$storage.setItem('loca', value);
  getWeather();
};
const changeDay = value => {
  data.detail = value;
};
const loadImg = value => {
  return require('@/assets/weather/' + value + '.png');
};
</script>

<style lang="scss" scoped>
.future {
  display: flex;
  padding-top: 20px;
  .future_item {
    background-color: aliceblue;
    display: block;
    height: 200px;
    padding: 0 10px;
    text-align: center;
    position: relative;
    cursor: pointer;
    justify-content: flex-end;
  }
  :hover {
    background-color: #9babc2;
  }
}
.future_tip {
  height: 200px;
  width: auto;
  .hours {
    display: flex;
    .hours_item {
      background-color: rgb(117, 224, 162);
      display: block;
      height: 200px;
      padding: 0 10px;
      text-align: center;
      position: relative;
    }
  }
}
</style>
